<template>
	<div class="future flex fs14 pl20 pr20" @click="toTrade(future)">
        <div class="flex2 flex">
            <span class="tl fs15">{{future.varietyName}}</span>
		    <span class="ml5 fs12 tl symbol">{{future.contractsCode && future.contractsCode.toUpperCase()}}</span>
        </div>
		<span class="flex1 tl fs16" :class="future.floatPrice>=0?'red':'green'">{{future.lastPrice}}</span>
		<span class="flex1 tl" v-if="future.exchangeStatus===1" :class="future.floatPrice>=0?'red':'green'">{{future.floatPrice}}</span>
		<span class="flex1 tl rest" v-if="future.exchangeStatus===0">休市中</span>
		<div class="flex1 tr box">
            <span class="tc" v-if="future.exchangeStatus===1" :class="future.floatPricePoint>0?'box-raise':'box-fall'">{{future.floatPricePoint}}</span>
            <span class="tc rest" v-if="future.exchangeStatus===0">{{future.floatPricePoint}}</span>
        </div>
	</div>
</template>
<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
    name: 'Future',
    props: {
        future: {
            type: Object,
            required: true,
            default: () => {
                return {
                    varietyName: 'future',
                    contractsCode: '-',
                    lastPrice: 0.01,
                    floatPrice: 0.01,
                    floatPricePoint: 0.01,
                    exchangeStatus: 0,
                    
                }
            }
        }
    },
    computed: {
		...mapState(['allVariety'])
	},
    methods: {
        toTrade(item) {
			if (item.varietyType) {
				this.allVariety.forEach(value => {
					if (value.varietyType === item.varietyType) {
						this.$store.commit('setCurVariety', value)
						this.$nextTick(() => {
							this.$router.push({
								path: '/trade'
							})
						})
					}
				})
			}
		}
    }

}
</script>
<style scoped>
    .symbol{
        color: #999;
    }
    .box span{
        width: 60px;
        height: 25px;
        line-height: 25px;
        border-radius: 2px;
        color: #fff;
        display: inline-block;
    }
    .box-raise{
        background-color: #f96d46;
    }
    .box-fall{
        background-color: #22b86e;
    }
    .rest{
        color: #999;
    }
    .box .rest{
        background-color: #999;
    }
    .future{
        background-color: #fff;
        border-bottom: 1px solid #f4f4f4;
    }
</style>
